<template>
  <div class="business-container">
    <div class="chart" id="chart_left1"></div>
  </div>
</template>

<script>
  import { getAction } from '@/api/manage'
  import { mixinDevice } from '@/utils/mixin'

export default {
    name: "business",
    mixins: [mixinDevice],
    props: {
        // 父组件传递过来的值
        areaCode: {
            type: String,
            default: ''
        },
        areaLevel: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // mwType: ['感染性医废', '病理性医废', '损伤性医废', '药物性医废', '化学性医废', '塑料输液瓶', '玻璃输液瓶'],
            // list: [],
            // mwType: null,
            mwData: null,
        }
    },
    watch: {
        // 如果 `areaCode` 发生改变，这个函数就会运行
        areaCode: function(newValue, oldValue) {
            this.getStatisticsData()
        },
    },
  mounted() {
    // this.getEchartLeft1();
    this.getStatisticsData();
  },

  methods: {
      // 发送请求，获取数据
      async getStatisticsData() {
          let params = {
              areaCode: this.areaCode,
              areaLevel: this.areaLevel
          }
          let res = await getAction('/hc/Statistical/getClassifyGroupWasteId',params)
          if (res && res.success) {
              let data = res.result || [];
              let list = data.map(item=>{
                  return{
                      name: item.wasteName,
                      value: item.totalWastePresentValue,
                      text: item.priceUnit,
                  }
              })
              this.mwData = list
          }
          this.getEchartLeft1();
      },

    getEchartLeft1() {
        // 实例化对象
        let myChart = this.$echarts.init(document.getElementById('chart_left1'));

        // 颜色
        let colorArray = [
            {
                top: '#0076e7', //蓝
                bottom: 'rgba(199,220,250,0.8)'
            }, {
                top: '#57CE77', //绿
                bottom: 'rgba(207,252,215,0.8)'
            },
            {
                top: '#C93513', //红
                bottom: 'rgba(250,210,204,0.8)'
            }, {
                top: '#D1AD0B', //黄
                bottom: 'rgba(248,230,201,0.8)'
            },
            {
                top: '#575ac3', //紫
                bottom: 'rgba(208,209,250,0.8)'
            },
            {
                top: '#52EECE', //绿
                bottom: 'rgba(208,209,250,0.8)'
            },
            {
                top: '#F06882', //红
                bottom: 'rgba(208,209,250,0.8)'
            },
            {
                top: '#FAA45D', //橙
                bottom: 'rgba(208,209,250,0.8)'
            }
        ]
        let wasteList = [];
        let listData = []
        this.mwData.forEach((item,index) => {
            wasteList.push(item['name'])
            listData.push(item['value'] + item['text'])
        });
        let option = {
            // 点击图表时提示的内容
            tooltip: {
                show: true,
                formatter: function({ data }) {
                    let str = '';
                    if(data){
                        str = `${data.name}:${data.value || 0} ${data.text || ''}`;
                    }
                    return str;
                },
            },
            // 文本
            grid: {
                borderWidth: 0,
                left: '0%',
                top: '0%',
                right: '0%',
                bottom: '8%',
                containLabel: true
            },

            xAxis: {
                type: 'value',
                show: false,
                position: 'top',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                  show: false
                },
            },
            yAxis: [{
                type: 'category',
                axisTick: {
                    show: false,
                    alignWithLabel: false,
                    length: 5
                },
                'splitLine': { //网格线
                    'show': false
                },
                inverse: 'true', //排序
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#b3ccf8'

                    }
                },
                axisLabel: {
                  show: true,
                  inside: false,
                  textStyle: {
                    color: '#b3ccf8',
                    fontSize: 13
                  },

                },
                data: wasteList
            },
            {
                type: 'category',
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  show: true,
                  inside: false,
                  textStyle: {
                    color: '#b3ccf8',
                    fontSize: 13
                  },
                    formatter: (val) => {
                        return `${val}`
                    }
                },
                splitArea: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                data: listData.reverse()
              }],
            series: [{
                name: '产量',
                type: 'bar',
                zlevel: 2,
                barWidth: '10px',
                animationDuration: 1500,
                label: {
                    normal: {
                        // color: '#b3ccf8',
                        show: false,
                        position: 'right',
                        // show: true,
                        // position: 'right',
                        formatter: function({ data }) {
                            let str = '';
                            if(data){
                                str = `${data.value || 0} ${data.text || ''}`;
                            }
                            return str;
                        },
                        textStyle: {
                            color: '#b3ccf8' //color of value
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        show: true,
                        color: function(params) {
                            let num = colorArray.length
                            return {
                                type: 'linear',
                                colorStops: [{
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }, {
                                    offset: 0,
                                    color: colorArray[params.dataIndex % num].bottom
                                }, {
                                    offset: 1,
                                    color: colorArray[params.dataIndex % num].top
                                }]
                                //globalCoord: false
                            }
                        },
                        barBorderRadius: 70,
                        borderWidth: 0,
                        borderColor: '#FFF'
                    }
                },
                barGap: '0%',
                barCategoryGap: '50%',
                data: this.mwData
            }]
        }

      // 把配置给实例对象
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="less" scoped>
.business-container {
  .chart {
    height: 3rem;
  }
}
</style>
